<!-- 顶部信息栏 -->
<template>
    <header id="topbar">  <!--头部蓝色-->
        <el-row>
            <el-col :span="4" class="topbar-left">
                <i id="icon1" class="iconfont icon-kaoshi"></i>
                <span class="title" @click="index()">GREENSHOP-SYSTEM</span>
            </el-col>
            <el-col :span="20" class="topbar-right">
                <i class="el-icon-menu" @click="toggle()"></i>
                <div class="user">
                    <span>{{admin.adminNickname}}</span>
                    <img :src="require('@/assets/img/adminProfilePictures/'+admin.adminProfilePictureSrc)" class="user-img" ref="img" @click="showSetting()" />
                    <transition name="fade">
                        <div class="out" ref="out" v-show="login_flag">
                            <ul>
                                <li><a href="javascript:;" @click="adminSetting()">管理员信息</a></li>
                                <li class="exit" @click="exit()"><a href="javascript:;">退出登录</a></li>
                            </ul>
                        </div>
                    </transition>
                </div>
            </el-col>
        </el-row>
    </header>
</template>

<script>
    import store from '@/store'
    import {mapState,mapMutations} from 'vuex'
    export default {
        data() {
            return {
                login_flag: false,
                admin: { //用户信息
                    adminNickname: null,
                    adminId: null,
                    adminProfilePictureSrc:''
                }
            }
        },
        created() {
            this.getUserInfo()
        },
        computed: mapState(["flag","menu"]),
        methods: {
            //显示、隐藏退出按钮
            showSetting() {
                this.login_flag = !this.login_flag
            },
            //左侧栏放大缩小
            ...mapMutations(["toggle"]),//将toggle方法从store里拿出来放到methods里

            getUserInfo() { //获取用户信息
                let adminNickname = this.$cookies.get("nickName")
                //console.log("cookies",adminNickName)
                let adminId = this.$cookies.get("id")
                let  adminProfilePictureSrc = this.$cookies.get("picture")
                this.admin.adminNickname = adminNickname
                this.admin.adminId = adminId
                this.admin.adminProfilePictureSrc = adminProfilePictureSrc
            },
            index() {
                this.$router.push({path: '/cuisine'})
            },
            exit() {
                this.login_flag = false  //点击跳转后就关闭头像展开
                let role = this.$cookies.get("region")
                this.$router.push({name:"Login",params:{region:role}}) //跳转到登录页面
                this.$cookies.remove("nickName") //清除cookie
                this.$cookies.remove("id")
                this.$cookies.remove("region")
                if(role === '管理员') {

                }
            },
            adminSetting(){  //将adminId传给adminSetting页面，让其展现数据
                this.login_flag = false  //点击跳转后就关闭头像展开
                let _this = this              //跳转到管理员信息页面,也可以不用传theAdminId这个值，我用cookie更友好些
                _this.$router.push({name:"AdminSetting",params:{theAdminId:_this.admin.adminId}})
            }

        },
        store
    }
</script>

<style scoped>
    .fade-enter-active, .fade-leave-active {
        transition: opacity .5s;
    }
    .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
        opacity: 0;
    }
    #topbar {
        position: relative;
        z-index: 10;
        background-color: #545c64; /*头部栏颜色*/
        height: 80px;
        line-height: 80px;
        color: #fff;  /*导航字体颜色*/
        box-shadow: 5px 0px 10px rgba(0, 0, 0, 0.5);    /*头部投影*/
    }
    #topbar .topbar-left {
        height: 80px;
        display: flex;
        justify-content: center;
        background: rgba(0, 0, 0, 0.05);
        overflow: hidden;
    }
    .topbar-left .icon-kaoshi {  /*greenshopsystem的字体大小*/
        font-size: 60px;
    }
    .topbar-left .title {
        font-size: 15px;
        cursor: pointer;  /*该样式可以将默认箭头样式变为手指样式*/
    }
    .topbar-right {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .topbar-right .user-img {
        width: 50px;
        height: 50px;
        border-radius: 50%;
    }
    .topbar-right .el-icon-menu {
        font-size: 30px;
        margin-left: 20px;
    }
    .topbar-right .user {
        position: relative;
        margin-right: 40px;
        display: flex;
    }
    .topbar-right .user .user-img {
        margin-top: 15px;
        margin-left: 10px;
        cursor: pointer;
    }
    .user .out {
        font-size: 10px;
        position: absolute;
        top: 80px;
        right: -10px;
        background-color: rgb(6, 4, 5);
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(18, 66, 128, 0.76);
        padding: 5px;
    }
    .user .out ul {
        list-style: none;
    }
    .user .out ul > li {
        height: 30px;
        line-height: 30px;
    }
    .out a {
        text-decoration: none;
        color: #fefefe;
    }
    .out .exit {
        margin-top: 4px;
        padding-top: 4px;
        border-top: 1px solid #ccc;
    }
</style>
